[자바스크립트] 상위 태그 및 부모 태그 제거하기, strip parent tag

자바스크립트를 사용하여 상위 또는 부모 태그를 제외하는 방법에 대하여 알아보려고 합니다. 예를들어 아래와 같이 <b>Hello</b>라는 태그가 존재하는 경우 상위에 있는 태그(부모 태그)인 span을 제외하고 Hello 텍스트 노드만 반환하는 방법입니다.

! 상위 또는 부모 태그를 제외(Strip wrapper)하는 경우는 언제일까요?

하나. 부모 태그가 불필요한 경우 - 속성이 없는 등의 무의미한 경우가 해당
둘. 부모 태그에 상속 받는 스타일 제거 - 위와 같이 b 태그의 볼드를 제거하기 위함

그렇다면 이제 제거 방법을 알아봅니다. 방법은 아래와 같이 크게 세 가지가 존재합니다.

• 1. jQuery의 unwrap() 메소드 사용하기
• 2. 내장함수 outerHTML 사용 방법
• 3. 내장함수 replaceWith()와 childNodes() 사용하기

이렇게 세 가지 방법을 생각하는 것이 가능합니다. 제이쿼리(jQuery)의 경우 최근에는 많이 쓰이지 않으므로 간단하게 방법을 알고 넘어갑니다.

다음으로 아래에서는 더 가벼운 2번 그리고 3번 방법을 아래에서 알아봅니다. 먼저 outerHTML을 사용하는 방법입니다.

! outerHTML 사용하기

HTML 태그 요소를 반환하는 함수로 innerHTML이 가장 많이 사용됩니다. innerHTML은 inner 즉 내부 요소만 반환하는데요 ~ 이와 달리 outerHTML은 내부를 감싸고 있는 wrap 요소까지 같이 반환하죠. 이를 이용하여 아래와 같이 코드를 작성할 수 있습니다.

outerHTML의 값으로 innerHTML을 사용하였습니다. 즉 내부 요소의 값을 outerHTML의 값으로 변경하여 wrapper 요소인 b를 제외한 것과 같게 됩니다.

! replaceWith()와 childNodes()를 사용하기

이 방법 역시 간단하며 위의 outerHTML 그리고 innerHTML과 비슷한 과정으로 변경하게 됩니다. 여기에 사용된 두 가지 내장함수는 각각 다음의 기능을 가지고 있습니다.

Element.replaceWith() // 현재 요소를 다른 요소(노드)로 변경하기
Element.childNodes() // 현재 요소가 가진 모든 자손 노드를 반환

이를 사용하여 아래와 같이 코드를 작성해봅니다.

코드 작성은 끝났습니다. 위 코드를 실행하면 동일하게 b 태그가 제외됩니다.


여기까지 wrapper 요소를 제외하는 방법에 대하여 알아보았습니다. 모두 결과는 동일합니다.


[참고] 위 방법의 차이점 알아보기

위의 방법 중 outerHTML을 사용하는 것과 replaceWith()를 사용하는 동일한 결과를 가져오지만 차이점이 있습니다. outerHTML은 새롭게 DOM을 생성하는 방법이고 replaceWith()는 이미 존재하는 노드로 변경한다는 점이죠. 만약 반드시 새로운 노드를 생성한다면 비슷하겠지만 이미 있는 태그로 변경할 수 있다면 replaceWith()를 사용하는 것이 더 나은 선택이 될 수 있을 것입니다.